<template>
	<view class="write">
		<view v-show="!showPop">
			<view class="server-nav bg-white flex1">
				<view class="nav-item row-between" @tap="writeOffFun">
					<text>核销</text>
					<u-icon name="arrow-right" class="arrow-right"></u-icon>
				</view>
				<view class="nav-item row-between" @tap="changeShowProvide">
					<text>优惠券分发</text>
					<u-icon name="arrow-right" class="arrow-right"></u-icon>
				</view>
			</view>
			<navigator hover-class="none" class="go-back-btn row-center br60 back-home" open-type="switchTab"
				url="/pages/index/index">
				<view class="br60 lg">返回首页</view>
			</navigator>
		</view>
		<u-popup class="share-popup" :closeOnClickOverlay="false" v-model="showPop" mode="center" border-radius="14"
			:mask-close-able="false">
			<view class="h5-login" v-if="!isWeixin">
				<!-- <image class="logo" :src="appConfig.shop_login_logo"></image> -->
				<view class="input">
					<u-input v-model="username" style="width: 100%;" placeholder="请输入账户" :input-border="false" />
				</view>
				<view class="input row" style="padding: 15rpx 0;">
					<u-input v-model="password" type="password" style="flex: 1;" :password-icon="false"
						placeholder="请输入密码" :input-border="false" />
				</view>
				<view class="input row" style="padding: 15rpx 0;">
					<u-input v-model="code" style="flex: 1;" placeholder="请输入验证码" :input-border="false" />
					<custom-image @click="getCaptcha" width="220rpx" height="120rpx" radius="0" lazy-load
						:src="codeImg">
					</custom-image>
				</view>
				<button style="margin: 50rpx 0 50rpx;width: 580rpx;" size="lg" class="br60" type="primary"
					@click="login">登录</button>
				<navigator hover-class="none" class="go-back-btn row-center br60" open-type="switchTab"
					url="/pages/index/index">
					<view class="primary br60 lg">返回首页</view>
				</navigator>
			</view>
		</u-popup>
		<u-popup class="show-provide" :closeOnClickOverlay="false" v-model="showProvide" mode="bottom"
			border-radius="14">
			<view class="provide-form">
				<!-- <view v-for="(item, index) in form" :key="index">
					<view class="input row-between mb10" style="padding: 15rpx 0;">
						<view class="row-between mr20">
							<text>金额：</text>
							<u-number-box class="flex1 input-wrap" v-model="item.amount" max="10"
								:positive-integer="false" />
						</view>
						<view class="row-between">
							<text>数量：</text>
							<u-number-box class="flex1 input-wrap" v-model="item.quantity" />
						</view>
					</view>
				</view> -->
				<view class="input row-between mb10" style="padding: 15rpx 0;">
					<view class="row-between mr30">
						<text>金额：</text>
						<u-number-box class="flex1 input-wrap" v-model="form.amount" max="10"
							:positive-integer="false" />
					</view>
					<view class="row-between">
						<text>数量：</text>
						<u-number-box class="flex1 input-wrap" v-model="form.quantity" />
					</view>
				</view>
				<!-- <view class="add-wrap">
					<view class="add-btn" @click="addForm"></view>
				</view> -->
				<button type="primary" @click="onSubmit">提交</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex'
	import Cache from "@/utils/cache"
	import {
		adminApi
	} from '@/config/app';
	import {
		setCouponIssuing
	} from '@/api/app'
	export default {
		data() {
			const yami = Cache.get('yami')
			return {
				showPop: !yami,
				type: 'number',
				codeImg: '',
				uuid: '',
				password: '',
				username: '',
				code: '',
				showProvide: false,
				code: '',
				/* form: [{
					amount: 0,
					quantity: 0,
				}], */
				form: {
					amount: 0,
					quantity: 0,
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					intro: [{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change'
					}]
				}
			};
		},
		onLoad() {
			const {
				isAdmin
			} = this.userInfo
			if (!isAdmin) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			} else {
				this.showPop && this.getCaptcha()
			}
		},
		onShareAppMessage() {
			const shareInfo = Cache.get('shareInfo')
			return !this.code ? {
				title: '请分发优惠券后再分享'
			} : {
				title: "快来牛大师团餐领优惠券啦",
				imageUrl: shareInfo.imageUrl,
				path: "pages/launch_page/launch_page?share_code=" + this.code
			};
		},
		methods: {
			login() {
				const {
					uuid,
					password,
					username,
					code
				} = this
				if (!username || !password) {
					return this.$toast({
						title: "账号或密码不能为空"
					})
				}
				const _this = this
				uni.request({
					url: adminApi + '/system/login',
					method: 'POST',
					data: {
						uuid,
						password,
						username,
						code,
						terminal: 1
					},
					success: function success({
						data: res
					}) {
						if (res.code === 200) {
							_this.showPop = false
							Cache.set('yami', res.data.token)
						} else {
							_this.$toast({
								title: res.msg || "登录失败"
							})
						}
					}
				})
			},
			getCaptcha() {
				const _this = this
				uni.request({
					url: adminApi + '/system/captcha',
					method: 'GET',
					success: function success({
						data: res
					}) {
						const {
							code,
							data,
							msg
						} = res
						if (code === 200) {
							_this.codeImg = data.img
							_this.uuid = data.uuid
						}
					}
				})
			},
			changeShowProvide() {
				this.showProvide = true
			},
			onSubmit() {
				// const err = this.form.filter((item) => !item.amount && !item.quantity)
				// if (err) {
				const {
					amount,
					quantity
				} = this.form
				if (!quantity || !amount) {
					this.$toast({
						title: '请设置完所有金额和数量后提交'
					})
					return
				}
				const _this = this
				const yami = Cache.get('yami')
				uni.request({
					url: adminApi + '/coupon/issuing',
					method: 'POST',
					data: {
						amount,
						quantity
					},
					header: {
						yami
					},
					success: function success({
						data: res
					}) {
						if (res.code === 200) {
							_this.$toast({
								title: '提交成功！通过右上角分享优惠券',
								endtime: 3000
							})
							_this.code = res.msg
							_this.showProvide = false
						} else {
							_this.$toast({
								title: res.msg || '提交失败，请重试！'
							})
						}
					}
				})

			},
			addForm() {
				this.form.push({
					amount: 0,
					quantity: 0,
				})
			},
			writeOffFun() {
				const yami = Cache.get('yami')
				const _this = this
				uni.scanCode({
					success: function(res) {
						const codeRes = JSON.parse(res.result)
						uni.request({
							url: adminApi + '/order/delivered',
							method: 'POST',
							data: {
								orderIds: [codeRes.id]
							},
							header: {
								yami
							},
							success: function success({
								data: res
							}) {
								if (res.code === 333) {
									Cache.remove('yami')
									_this.showPop = true
									_this.getCaptcha()
									_this.$toast({
										title: '登录失效，请重新登录'
									})
								} else {
									uni.showModal({
										title: res.code === 200 ? "核销成功" : '提示',
										content: res.msg,
										success(_res) {
											if (_res.confirm) {
												_this.writeOffFun()
											}
										}
									});
								}
							}
						})

					}
				});
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
		}
	}
</script>

<style lang="scss" scoped>
	.write {
		position: relative;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;

		&::before,
		&::after {
			content: '';
			position: fixed;
			z-index: 99;
			top: 0;
			width: 100%;
			height: 20rpx;
			background-color: #FFCC46;
		}

		&::after {
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
		}

		.go-back-btn {
			width: 60%;
			height: 84rpx;
			box-sizing: border-box;
		}

		.back-home {
			position: fixed;
			left: 20%;
			bottom: 100rpx;
			background-color: #FF6600;
			color: #fff;
		}

		.h5-login {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 50rpx;
			height: 100%;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 14rpx;

			.input {
				width: 580rpx;
				border-bottom: $-solid-border;
				margin-top: 30rpx;
			}

			.sms-btn {
				border: 1px solid $-color-primary;
				width: 176rpx;
				height: 60rpx;
				box-sizing: border-box;
			}

			.wx-login {
				margin-top: 60rpx;

				.image {
					margin-top: 40rpx;
					width: 80rpx;
					height: 80rpx;
				}
			}

		}

		.server-nav {
			padding: 50rpx;
			border-radius: 8rpx;

			.nav-item {
				padding: 40rpx 0;
				color: #1e1e1e;

				>text {
					color: #1e1e1e;
				}
			}
		}

		.show-provide {
			.provide-form {
				padding: 50rpx 30rpx 100rpx;
			}
		}

		.add-wrap {
			display: flex;
			justify-content: flex-end;

			margin: 10rpx 0 30px;

			.add-btn {
				width: 100rpx;
				height: 100rpx;
				border: 1px solid #FF6600;
				border-radius: 50%;
				background: url('../../static/images/icon_float_more.png') no-repeat center/contain;
			}
		}
	}
</style>
